<template>
  <a-col :span="24">
    <a-card title="累计投资额">
      <a-tabs @change="onTabChange">
        <a-tab-pane key="1" tab="柱状图">
          <a-row>
            <!-- 左侧图表 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
              <div id="cumulative-container"></div>
            </a-col>
            <!-- 右侧文本 -->
            <a-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="{ span: 7, offset: 1 }"
              :xl="{ span: 7, offset: 1 }"
            >
              <a-row
                v-for="(item, index) in investmentData"
                :key="index"
                style="margin: 22px"
              >
                <a-col span="2"
                  ><div>{{ Number(index) + 1 }}</div></a-col
                >
                <a-col span="18">{{ timeUnit[index] }}</a-col>
                <a-col span="4">{{ item }}</a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="折线图">
          <a-row>
            <!-- 左侧图表 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
              <div id="cumulative-containerr"></div>
            </a-col>
            <!-- 右侧文本 -->
            <a-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="{ span: 7, offset: 1 }"
              :xl="{ span: 7, offset: 1 }"
            >
              <a-row
                v-for="(item, index) in investmentData"
                :key="index"
                style="margin: 22px"
              >
                <a-col span="2"
                  ><div>{{ Number(index) + 1 }}</div></a-col
                >
                <a-col span="18">{{ timeUnit[index] }}</a-col>
                <a-col span="4">{{ item }}</a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-col>
</template>

<script setup>
import global from "../../../global/global.vue";
import * as echarts from "echarts";
import { nextTick, onMounted, ref, computed } from "vue";
import * as _ from "lodash";
import { getTotalDataAPI } from "@/api/module/engineeringDisplay";

// 项目id
const projectId = global.xmid;

// 投资额数据
const investmentData = ref([]);
// 时间单位
const timeUnit = ref([]);

// 页面挂载
onMounted(async () => {
  // 获取数据
  await getTotalData();
  // 柱状图配置
  const options = ref({
    tooltip: {},
    xAxis: {
      type: "category",
      data: timeUnit.value,
    },
    yAxis: {
      type: "value",
      name: "（万元）",
    },
    series: [
      {
        name: "累计投资额",
        type: "bar",
        data: investmentData.value,
        barWidth: "50%",
      },
    ],
    // 图形颜色
    color: ["#3a92ef"],
  });
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById("cumulative-container"));
  // 绘制图表
  myChart.setOption(options.value);
  // 实现图表防抖自适应
  window.addEventListener(
    "resize",
    _.debounce(() => {
      myChart.resize();
    }, 500)
  );
});

// 面板切换
const onTabChange = (activeKey) => {
  if (activeKey === "1") {
    console.log(activeKey);
  } else if (activeKey === "2") {
    nextTick(() => {
      // 基于准备好的dom，初始化echarts实例
      let myChartt = echarts.init(
        document.getElementById("cumulative-containerr")
      );
      // 折线图配置
      const optionss = ref({
        tooltip: {},
        xAxis: {
          type: "category",
          data: timeUnit.value,
        },
        yAxis: {
          type: "value",
          name: "（万元）",
        },
        series: [
          {
            name: "累计投资额",
            type: "line",
            data: investmentData.value,
          },
        ],
        // 图形颜色
        color: ["#3a92ef"],
      });
      // 绘制图表
      myChartt.setOption(optionss.value);
      // 实现图表防抖自适应
      window.addEventListener(
        "resize",
        _.debounce(() => {
          myChartt.resize();
        }, 500)
      );
    });
  }
};

// 项目累计投资额
const getTotalData = async () => {
  const res = await getTotalDataAPI({
    id: projectId,
  });
  timeUnit.value = [...res.data.map((item) => item.date)];
  investmentData.value = [...res.data.map((item) => item.value)];
};
</script>

<style lang="less" scoped>
#cumulative-container {
  width: 100%;
  height: 550px;
}
#cumulative-containerr {
  width: 100%;
  height: 550px;
}
</style>
